<template>
	<view class="wrap flex column">
		<view class="wrap-first-category flex">
			<block v-for="(item, index) in firstCategory" :key="index">
				<view class="item flex column align-center just-center" @click="onFirstCategory(item, index)" :class="item.id === firstCategoryID ? 'active' : ''">
					<image class="img" :src="$getImageURL(item.image)" />

					<view class="f-26">{{ item.name }}</view>
				</view>
			</block>
		</view>

		<view class="wrap-second-category flex">
			<block v-for="(item, index) in secondCategory" :key="index">
				<view class="item flex column align-center just-center" @click="onSecondCategory(item)" >
					<image class="img" :src="$getImageURL(item.image)" />

					<view class="name f-26" :class="item.id === secondCategoryID ? 'active' : ''">{{ item.name }}</view>
				</view>
			</block>
		</view>

		<wrapExplain />
	</view>
</template>

<script>
	import wrapExplain from "@/components/publish/publishExplain.vue";
	export default {
		components: {
			wrapExplain,
		},
		data() {
			return {
				index: 0, //0:便民/头条 1:政务
				current: 0, //当前位置
				firstCategory: [],
				firstCategoryID: "",

				secondCategory: [],
				secondCategoryID: "",
			};
		},
		onLoad(options) {
			this.index = options.index;
			this.getFirstCategory();
		},
		methods: {
			/**
			 * 点击一级分类
			 */
			onFirstCategory(item, index) {
				if (this.$filters.onActivityAlert(item)) {
					if (this.index == 1) {
						this.$st.show("无法选择切换分类");
						return;
					}
					if (this.index == 0) {
						if (index === 2) {
							this.$st.show("无法选择此分类");
							return;
						}
					}
					this.current = index;
					this.firstCategoryID = item.id;
					this.secondCategoryID = "";
					this.getSecondCategory();
				}
			},
			/**
			 * 二级分类点击
			 */
			onSecondCategory(item) {
				this.secondCategoryID = item.id;

				this.$jump.to(`/pages/publish/publish?status=${this.current + 1}&article_category_id=${item.id}`);
			},

			/**
			 * 获取一级分类
			 */
			getFirstCategory() {
				this.$commonNetwork.getArticleCategoryList("", (res) => {
					this.firstCategory = res;
					if (this.index == 0) {
						this.firstCategoryID = this.firstCategory[0].id;
						this.current = 0;
					} else if (this.index == 1) {
						this.firstCategoryID = this.firstCategory[2].id;
						this.current = 2;
					}
					this.getSecondCategory();
				});
			},
			/**
			 * 获取二级分类
			 */
			getSecondCategory() {
				this.$commonNetwork.getArticleCategoryList(this.firstCategoryID, (res) => {
					this.secondCategory = res;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 25rpx;
		box-sizing: border-box;
		gap: 25rpx;

		.wrap-first-category {
			width: 100%;
			background-color: white;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 20rpx;

			.item {
				width: calc(25% - 2rpx);
				height: 180rpx;
				overflow: hidden;
				gap: 18rpx;
				color: #454545;
				border-radius: 10rpx;
				padding: 20rpx 0rpx;

				.img {
					width: 86rpx;
					height: 86rpx;
				}
			}
			.active {
				color: #eb5c20;
				border: 2rpx solid #eb5c20;
			}
		}

		.wrap-second-category {
			margin-left: -25rpx;
			width: calc(100% + 50rpx);
			overflow: hidden;
			flex-wrap: wrap;

			.item {
				margin-left: 25rpx;
				margin-bottom: 20rpx;
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				background-color: white;
				border-radius: 16rpx;
				gap: 10rpx;

				.img {
					width: 60rpx;
					height: 60rpx;
				}

				.name {
					color: #333333;
				}

				.active {
					color: #eb5c20;
				}
			}
		}
	}
</style>
